<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="app">
        <table>
            <caption>
                <h1>图书价格表</h1>
            </caption>
            <thead>
                <tr>
                    <th v-for='item in name'>{{item}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for='(item,index) in books'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.date}}</td>
                    <!-- 价格是添加过滤器 -->
                    <td>{{item.price | showPrice}}</td>
                    <td>
                        <button @click='decrement(index)' :disabled='item.count <= 1'>-</button>
                        {{item.count}}
                        <button @click='increment(index)' :disabled='item.count>=9'>+</button>
                    </td>
                    <td>
                        <button @click = 'removeHandle(index)'>移除</button>
                    </td>
                </tr>
                <tr>
                    <td v-if='books.length' colspan="6" style="text-align: left;">总价格: {{totalPrice | showPrice }}</td>
                    <td v-else colspan="6" style="text-align: center; color: #999;">购物车为空</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src='../../js/vue.js'></script>
    <script src="main.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: ['', '书籍名称', '出版日期', '价格', '购买数量', '操作'],
                books: [
                    { id: 1001, name: '《算法导论》', date: '2006-09', price: '85.2033', count: 1 },
                    { id: 1002, name: '《UNIX编程艺术》', date: '2006-02', price: '59.310', count: 1 },
                    { id: 1003, name: '《编程珠玑》', date: '2008-10', price: '39.0220', count: 1 },
                    { id: 1004, name: '《代码大全》', date: '2006-03', price: '128.0220', count: 1 }
                ]
            },
            computed: {
                totalPrice() {
                    /* let sum = 0;
                    for (let book of this.books) {
                        sum += book.price * book.count;
                    }
                    return sum; */
                    
                    //2.高阶函数reduce求和
                    return this.books.reduce((preValue, book)=>{
                        //console.log(book);
                        return preValue + book.price * book.count;
                    },0)
                }
            },
            methods: {
                decrement(index) {
                    this.books[index].count--;
                },
                increment(index) {
                        this.books[index].count++;
                },
                removeHandle(index){
                    this.books.splice(index, 1);
                }
            },
            filters: {
                showPrice(price) {
                    return '￥' + parseFloat(price).toFixed(2);
                }
            }
        })
    </script>
</body>

</html>